El componente de la aplicación es esencialmente el componente superior en una aplicación basada en React, de la cual todos los demás componentes son secundarios. Entonces, en create-react-app, la razón por la que hay un App.css y un index.css es solo para que create-react-app pueda tener una estructura de directorios muy simple y sin conflictos de nombres entre "App.css" e "index .css", por lo que pasa menos tiempo eliminando cosas genéricas y más tiempo construyendo sus cosas. La mejor práctica para estructurar una aplicación basada en React es simplemente tener cada componente en su propio directorio separado con su propio archivo index.js, archivo index.css y algo como index.test.js o como quiera estructurar sus archivos de prueba. . "Index.js" es el primer archivo que se busca en un directorio cuando llama a una declaración de importación ES6 para ese directorio, por lo que puede escribir:

 import HUD from './HUD'

en vez de:

 import HUD from './HUD/HUD.js'

Entonces, usar index.css solo ayuda a aclarar que este archivo index.css es para este Componente, ya que este index.js solo se refiere a este Componente

Aquí hay una estructura básica del directorio de la aplicación React:

 src ├── App │  ├── HUD │  │  ├── index.css │  │  ├── index.js │  │  └── index.test.js │  ├── index.css │  ├── index.js │  ├── index.test.js │  ├── Maze │  │  ├── index.css │  │  ├── index.js │  │  └── index.test.js │  ├── Tile │  │  ├── index.css │  │  ├── index.js │  │  └── index.test.js │  └── TouchControl │  ├── index.css │  ├── index.js │  └── index.test.js ├── index.css └── index.js

Un archivo index.css de nivel src sería un buen lugar para colocar reglas de estilo CSS de elemento DOM de contenedor de nivel superior, ya que el index.js de nivel src es el lugar inicial en una aplicación basada en React donde le dice a React que monte físicamente la aplicación Componente del HTML DOM real, en un elemento contenedor, algo como esto y diga que 'raíz' es una ID de un elemento que ya está en la página antes de que se cargue su JavaScript:

 import React from 'react' import ReactDOM from 'react-dom' import App from './App' import './index.css' ReactDOM.render( <App />, document.getElementById('root'))